<template>
  <view :class="theme">
    <view class="m-30">
      <input v-model="users.search" @confirm="search" :placeholder="`\ue67e 输入手机号或ID`" confirm-type="search"
        class="bg-section h-70 mb-30 text-center color-base b-rounded-20 text-26 fw-500" type="text"
        placeholder-class="iconfont color-placeholder fw-400">

      <view v-for="(user, index) in users.list" :index="index"
        class="relative mb-30 bg-section b-rounded-20 p-40 flex-row">
        <label
          :class="[['bg-inverse color-stress', 'bg-main color-primary'][user.is_active], 'absolute top-0 right-0 justify-center w-100 h-40 fw-600']"
          style="border-radius: 0 16rpx;">
          {{ ["未", "已"][user.is_active] }}激活
        </label>

        <view class="relative self-start">
          <uv-avatar size="90" :src="include(user.avatar)" />
          <label v-if="user.level_name" class="absolute top-90 text-18 justify-center w-full b-rounded-20 fw-700 lh-36"
            style="text-shadow: 1rpx 0 2rpx #eee; font-style: italic; background-color: rgba(92, 51, 201, 0.6); backdrop-filter: blur(30rpx);">
            {{ user.level_name }}
          </label>
        </view>

        <view class="ml-20">
          <view class="flex-row items-center">
            <view class="flex-1">
              <text class="text-30">{{ user.nickname || "-" }}</text>
              <text class="mt-24 text-22">{{ user.mobile || "-" }}</text>
            </view>
          </view>

          <view class="mt-24 flex-row flex-wrap ">
            <label class="w-50% lh-60">
              <text class="color-placeholder">战斗力：</text>
              <text class="color-label">{{ user.team_active || 0 }}</text>
            </label>
            <label class="w-50% lh-60">
              <text class="color-placeholder">好友人数：</text>
              <text class="color-label">{{ user.total_number || 0 }}</text>
            </label>
            <label class="w-50% lh-60">
              <text class="color-placeholder">直推激活：</text>
              <text class="color-label"> {{ user.direct_number || 0 }}</text>
            </label>
            <label class="w-50% lh-60">
              <text class="color-placeholder">好友激活：</text>
              <text class="color-label"> {{ user.total_number_real || 0 }}</text>
            </label>
          </view>
        </view>

      </view>

      <view class="m-30 items-center z-9">
        <uv-image v-if="!users.list.length" :showLoading="false" width="396" height="256" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="users.cache.status" :is-dot="!!users.list.length" icon-color="#999" color="#999" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager, uniNavigator } from "@/common/libs/utils";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);

const users = reactive({
  search: "",
  pid: 0,
  page: 0,
  limit: 20,
  list: [] as any[],
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore",
  },
  status: 0,
  next: false,
});

onLoad(({ id }: any) => {
  id && (users.pid = +id);
  search();
});
onPullDownRefresh(() => {
  search();
  setTimeout(uni.stopPullDownRefresh, 360);
});

const search = () => {
  Object.assign(users, {
    page: 0,
    list: [] as any[],
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore",
    },
    next: false,
  });
  queryUserInfo();
};

onReachBottom(() => queryUserInfo());

const queryUserInfo = () => {
  pager({ url: "/directList", data: { pid: users.pid, query: users.search } }, users);
};
</script>

<style lang="scss" scoped>
// scss
</style>